{% import _self as self %}

{# Display the gradeable_message if one exists at the top of the page #}
{% if has_gradeable_message %}
    <div class='content gradeable_message'>{{ gradeable_message | markdown }}</div>
{% endif %}

{% if has_overridden_grades %}
    <div class='content overridden_message'><p>Please see your instructor if you have for questions about your grade for this assignment</p></div>
{% endif %}

<div class="content">
    <header id="gradeable-info">
        <h1>New submission for: {{ gradeable_name }}</h1>
        {% if has_due_date %}
            <h2>Due: {{ formatted_due_date }}</h2>
        {% endif %}
        <div class="loading-bar-wrapper">
            <label for="loading-bar">Upload progress: <span id="loading-bar-percentage"></span></label>
            <progress id="loading-bar" value="0" ></progress>
        </div>
    </header>

    {% if part_names|length > 1 and one_part_only %}
        <h4 style="color: red;">
            Please drag and drop your files into only one area below. Files submitted to additional areas will not be graded.
        </h4>
    {% endif %}

    {% if show_no_late_submission_warning %}
        <i class="red-message">Warning, you are making a late submission for a gradeable without late submissions enabled!</i>
    {% endif %}

    {# Admin submission type selector #}
    {% if core.getUser().accessFullGrading() %}
        <form id="submission-form" method="post">
            <fieldset id="submission-mode">
                <legend> Select submission mode: </legend>
                <label for="radio-normal">
                    <input type='radio' id="radio-normal" name="submission_type" checked="true">
                    Normal Submission
                </label>
                <label for="radio-student">
                    <input type='radio' id="radio-student" name="submission_type">
                    Make Submission for a Student
                </label>
                {% if part_names|length == 1 and not is_vcs %}
                    <label for="radio-bulk">
                        <input type='radio' id="radio-bulk" name="submission_type">
                        Bulk PDF Upload
                        <a aria-label="Bulk PDF Upload Help" href = "https://submitty.org/instructor/bulk_pdf_upload" target="_none">
                            <i title="Bulk PDF Upload Help" class="far fa-question-circle"></i>
                        </a>
                    </label>
                {% endif %}
            </fieldset>
            <div id="user-id-input" class="hide">
                <div class="sub">
                    Note: This <i>permanently</i> affects the student's submissions, so please use with caution.
                </div>
                <div class="sub">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                    <label for="user_id"> user_id: </label>
		            <input type="text" id= "user_id" value ="" placeholder="{{ user_id }}"/>
                </div>
            </div>
            <div class="sub hide" id="pdf-submit-button">
                <div class="sub">
                    <label for="use-qr">Split by QR code?</label>
                    <input type="checkbox" id="use-qr">
                    <label id="pages-prompt" for="num_pages"># of page(s) per PDF:</label>
                    <span id="prefix-prompt">QR code prefix/suffix:
                    <a aria-label="Split by QR Code Help" href="https://submitty.org/instructor/bulk_pdf_upload#automatic-association-of-pdfs-using-customized-exams-with-qr-codes" target="_none">
	                    <i title="Split by QR Code Help" class="far fa-question-circle"></i>
                    </a>
                    </span>
                    <input type="number" id= "num_pages" placeholder="required"/>
                    <input type="text" id="qr_prefix" placeholder="Prefix (optional)" aria-label="QR Prefix (Optional)" />
                    <input type="text" id="qr_suffix" placeholder="Suffix (optional)" aria-label="QR Suffix (Optional)" />
                    <div id="expected-num-box">
                        <label for= "expected-pages-input"> Expected Number of pages per PDF: </label>
                        <input id= "expected-pages-input" placeholder="e.g. 1-5, 8, 11-13" onchange="highlightPageCount()" />
                    </div>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            $(function() {
                students_full = {{ students_full|json_encode|raw }};
                $('#qr_prefix').prop('hidden', true);
                $('#qr_suffix').prop('hidden', true);
                $('#prefix-prompt').prop('hidden', true);
                $('#bulk_progress_box').prop('hidden', true);
                $('#expected-num-box').prop('hidden', true);

                //load what upload mode the user selected (if any)
                if(sessionStorage.getItem('radio-bulk')){
                    $('#radio-bulk').prop('checked', true);
                    $('#bulk_progress_box').prop('hidden', false);
                }
                else if(sessionStorage.getItem('radio-student')){
                    $('#radio-student').prop('checked',true);
                }
                else{
                    $('#radio-normal').prop('checked',true);
                }
                //load if bulkupload with qr codes selected or not
                if(sessionStorage.getItem('use-qr')){
                    $('#qr_prefix').prop('hidden',false)
                    $('#qr_suffix').prop('hidden',false)
                    $('#prefix-prompt').prop('hidden', false);
                    $('#pages-prompt').prop('hidden', true);
                    $('#num_pages').prop('hidden', true);
                    $('#use-qr').prop('checked',true);
                    $('#expected-num-box').prop('hidden', false);
                    //populate prefix textarea
                    if(sessionStorage.getItem('qr_prefix')){
                        $('#qr_prefix').val(sessionStorage.getItem('qr_prefix'));
                    }
                    if(sessionStorage.getItem('qr_suffix')){
                        $('#qr_suffix').val(sessionStorage.getItem('qr_suffix'));
                    }
                }
                if ($("#radio-student").is(":checked")) {
                    $('#user-id-input').show();
                }
                if ($("#radio-bulk").is(":checked")) {
                    $('#pdf-submit-button').show();
                    $('#bulk_progress_box').prop('hidden', false);
                }
                else{
                     $('#bulk_progress_box').prop('hidden', true);
                }
                if($('#use-qr').is(':checked')){
                    //save qr_code prefix on textarea change
                    $('#qr_prefix').change(function(){
                        sessionStorage.setItem('qr_prefix', $('#qr_prefix').val());
                    });
                    $('#qr_suffix').change(function(){
                        sessionStorage.setItem('qr_suffix', $('#qr_suffix').val());
                    });
                }
                $('#radio-normal').click(function() {
                    sessionStorage.setItem('radio-normal', true);
                    sessionStorage.removeItem('radio-student');
                    sessionStorage.removeItem('radio-bulk');
                    $('#pdf-submit-button').hide();
                    $('#user-id-input').hide();
                    $('#pdf-submit-button').hide();
                    $('#user_id').val('');
                    $('#bulk_progress_box').prop('hidden', true);
                });
                $('#radio-student').click(function() {
                    sessionStorage.setItem('radio-student', true);
                    sessionStorage.removeItem('radio-bulk');
                    sessionStorage.removeItem('radio-normal');
                    $('#pdf-submit-button').hide();
                    $('#user-id-input').show();
                    $('#bulk_progress_box').prop('hidden', true);
                });
                $('#radio-bulk').click(function()  {
                    sessionStorage.setItem('radio-bulk', true);
                    sessionStorage.removeItem('radio-student');
                    sessionStorage.removeItem('radio-normal');
                    $('#user-id-input').hide();
                    $('#pdf-submit-button').show();
                    $('#user_id').val('');
                    $('#bulk_progress_box').prop('hidden', false);
                });
                $('#use-qr').click(function(){
                    (sessionStorage.getItem('use-qr')) ? sessionStorage.removeItem('use-qr') : sessionStorage.setItem('use-qr', true);
                    $('#num_pages').prop('hidden', !$('#num_pages').is(':hidden'));
                    $('#qr_prefix').prop('hidden', !$('#qr_prefix').is(':hidden'));
                    $('#qr_suffix').prop('hidden', !$('#qr_suffix').is(':hidden'));
                    $('#prefix-prompt').prop('hidden', !$('#prefix-prompt').is(':hidden'));
                    $('#pages-prompt').prop('hidden', !$('#pages-prompt').is(':hidden'));
                    $('#expected-num-box').prop('hidden',!$('#expected-num-box').is(':hidden'));
                });
                $("#user_id").autocomplete({
                    source: students_full
                });
            });
        </script>
    {% endif %}
    {# /Admin submission type selector #}

    {% if is_vcs %}
        {% if vcs_host_type == 0 or vcs_host_type == 1 %}
            <h3>To access your Repository:</h3>
            <span><em>Note: There may be a delay before your repository is prepared, please refer to assignment instructions.</em></span><br />
            <samp>git  clone  {{ repository_path }}  SPECIFY_TARGET_DIRECTORY</samp>
        {% endif %}

        {% if vcs_host_type == 2 or vcs_host_type == 3 %}
            <h3>Please enter your GitHub URL: </h3>

            GitHub URL: &nbsp;&nbsp; <kbd>https://www.github.com/</kbd>
            <input type="text" id="github-user-id" name="git_user_id" class="required github-id" value="{{ github_user_id }}" placeholder="user_name"/>
            <kbd>/</kbd>
            <input type="text" id="github-repo-id" name="git_repo_id" class="required github-id" value="{{ github_repo_id }}" placeholder="repo_name"/>

            {% if vcs_host_type == 2 %}
            Note: This should be a <em>public repository</em>, visible to everyone.
            {% else %}
            Note: If this is not a <em>public repository</em>, please ensure that you have granted read access to INCOMPLETE! FIXME! SPECIAL USER.
            {% endif %}

        {% endif %}
        <input type="submit" id="submit" class="btn btn-primary" value="Grade My Repository" />
    {% else %}

        {# Notebook #}
        <div class="notebook">

            {# Render content #}
            {% set num_short_answer = 0 %}
            {% set num_codeboxes = 0 %}
            {% set num_multiple_choice = 0%}
            {% for cell in notebook %}
                <div id="content_{{ loop.index0 }}">

                    {# Handle if cell is markdown #}
                    {% if cell.type == "markdown" %}

                        {# Render markdown #}
                        {{ cell.markdown_data | markdown }}
                        {{ self.render_testcase_messages(cell, testcase_messages) }}

                    {# Handle if cell is image #}
                    {% elseif cell.type == "image" %}

                        <img src="{{ attribute(image_data, cell.image) }}"

                        {% if cell.width > 0 %}
                            width="{{ cell.width }}"
                        {% endif %}

                        {% if cell.height > 0 %}
                            height="{{ cell.height }}"
                        {% endif %}

                        {% if cell.alt_text is defined %}
                            alt="{{ cell.alt_text }}"
                        {% endif %}

                        >

                        {{ self.render_testcase_messages(cell, testcase_messages) }}

                    {# Handle if cell is short_answer #}
                    {% elseif cell.type == "short_answer" %}

                        {# If programming language not defined render regular text boxes #}
                        {% if cell.programming_language is not defined %}

                            {{ self.render_short_answer(cell, num_short_answer, highest_version, testcase_messages) }}
                            {% set num_short_answer = num_short_answer + 1 %}

                        {# Else render a codebox #}
                        {% else %}
                                <div>
                                    {% if cell.label %}
                                        {{ cell.label | markdown }}
                                    {% else %}
                                        Write your {{ cell.programming_language | title }} below:
                                    {% endif %}
                                </div>

                                <div id="codebox_{{ num_codeboxes }}"
                                     name="codebox_{{ num_codeboxes }}"
                                     autocapitalization="off"
                                     spellcheck="false"
                                     class="codebox"
                                     data-initial_value="{{ cell.initial_value }}"
                                     data-recent_submission="{{ cell.recent_submission }}"
                                     onKeyPress="handle_input_keypress();">
                                </div>

                                <button type="button" id="codebox_{{ num_codeboxes }}_clear_button" class="btn btn-primary codebox-clear-reset">Clear</button>
                                <button type="button" id="codebox_{{ num_codeboxes }}_recent_button" class="btn btn-primary codebox-clear-reset">Use Most Recent Submission</button>

                                <script>

                                    var editor_{{num_codeboxes}} = CodeMirror(document.getElementById("codebox_{{ num_codeboxes }}"),
                                        {
                                            "mode": "{{ cell.programming_language }}",
                                            lineNumbers: true,
                                            "theme": "eclipse"
                                        }
                                    );

                                    {# Populate codebox initially #}
                                    {% if core.getConfig().keepPreviousFiles() %}
                                        setCodeBox("codebox_{{ num_codeboxes }}", "recent");
                                    {% else %}
                                        setCodeBox("codebox_{{ num_codeboxes }}", "clear");
                                    {% endif %}

                                    {# Hide recent button if no previous submissions #}
                                    {% if highest_version == 0 %}
                                        document.getElementById("codebox_{{ num_codeboxes }}_recent_button").style.visibility = 'hidden';
                                    {% endif %}

                                    {# Setup init state of buttons #}
                                    {% if core.getConfig().keepPreviousFiles() %}

                                        {% if highest_version == 0 %}
                                            document.getElementById("codebox_{{ num_codeboxes }}_clear_button").disabled = true;
                                        {% else %}
                                            document.getElementById("codebox_{{ num_codeboxes }}_clear_button").disabled = false;
                                        {% endif %}

                                        document.getElementById("codebox_{{ num_codeboxes }}_recent_button").disabled = true;
                                    {% else %}
                                        document.getElementById("codebox_{{ num_codeboxes }}_clear_button").disabled = true;
                                        document.getElementById("codebox_{{ num_codeboxes }}_recent_button").disabled = false;

                                    {% endif %}
                                </script>
                            {% set num_codeboxes = num_codeboxes + 1 %}
                        {% endif %}

                    {# Handle if cell is multiple choice #}
                    {% elseif cell.type == "multiple_choice" %}

                        <fieldset id="mc_field_{{ num_multiple_choice }}"
                                  class="mc"
                                  {% if cell.recent_submission is defined %}data-prev_checked="{{ cell.recent_submission }}"{% endif %}>
                            {% if cell.allow_multiple == true %}
                                <legend>
                                    {% if cell.label %}
                                        {{ cell.label | markdown }}
                                    {% else %}
                                        You may select many:
                                    {% endif %}
                                </legend>

                                {{ self.render_testcase_messages(cell, testcase_messages) }}

                                {% for choice in cell.choices %}
                                    <label for="multiple_choice_{{ num_multiple_choice }}_{{ loop.index0 }}">
                                        <input type="checkbox"
                                               name="multiple_choice_{{ num_multiple_choice }}"
                                               id="multiple_choice_{{ num_multiple_choice }}_{{ loop.index0 }}"
                                               value="{{ choice.value }}"
                                               onclick="handle_input_keypress();"
                                        />
                                        {{ choice.description | markdown }}
                                    </label>
                                {% endfor %}
                            {% else %}
                                <legend>
                                    {% if cell.label %}
                                        {{ cell.label | markdown }}
                                    {% else %}
                                        Select one:
                                    {% endif %}
                                </legend>

                                {{ self.render_testcase_messages(cell, testcase_messages) }}

                                {% for choice in cell.choices %}
                                    <label for="multiple_choice_{{ num_multiple_choice }}_{{ loop.index0 }}">
                                        <input type="radio"
                                               name="multiple_choice_{{ num_multiple_choice }}"
                                               id="multiple_choice_{{ num_multiple_choice }}_{{ loop.index0 }}"
                                               value="{{ choice.value }}"
                                               onclick="handle_input_keypress();"
                                        />
                                        {{ choice.description | markdown }}
                                    </label>
                                {% endfor %}
                            {% endif %}
                        </fieldset>

                        {# Create reset to recent submission button #}
                        <button type="button" id="mc_{{ num_multiple_choice }}_clear_button" class="btn btn-primary mc-clear">Clear</button>
                        <button type="button" id="mc_{{ num_multiple_choice }}_recent_button" class="btn btn-primary mc-recent">Use Most Recent Submission</button>

                        <script>
                            {# Populate checkboxes initially #}
                            {% if cell.recent_submission is defined and core.getConfig().keepPreviousFiles() %}
                                setMultipleChoices("mc_field_{{ num_multiple_choice }}");
                            {% endif %}

                            {# Hide button if no previous submissions #}
                            {% if cell.recent_submission is not defined %}
                                $("#mc_{{ num_multiple_choice }}_recent_button").hide();
                            {% endif %}

                            {# Configure initial state for the button #}
                            {% if core.getConfig().keepPreviousFiles() %}

                                {% if highest_version == 0 %}
                                    $("#mc_{{ num_multiple_choice }}_clear_button").attr("disabled", true);
                                {% else %}
                                    $("#mc_{{ num_multiple_choice }}_clear_button").attr("disabled", false);
                                {% endif %}

                                $("#mc_{{ num_multiple_choice }}_recent_button").attr("disabled", true);
                            {% else %}
                                    $("#mc_{{ num_multiple_choice }}_clear_button").attr("disabled", true);
                                    $("#mc_{{ num_multiple_choice }}_recent_button").attr("disabled", false);
                            {% endif %}
                        </script>

                        {% set num_multiple_choice = num_multiple_choice + 1 %}

                    {% endif %}

                </div>

            {% endfor %}

        </div>

        {# File upload boxes #}
        <div id="upload-boxes">
            {# Submit boxes #}
            {% for part in part_names %}
                {# uploadIndex and input-file + Index required for drag-and-drop.js #}
                <div tabindex="0"
                     id="upload{{ loop.index }}"
                     class="upload-box"
                     onkeypress="clicked_on_box(event)"
                     role="text"
                     aria-label="Press enter to upload your {{ part }} file"
                >
                    <h2 class="label" id="label{{ loop.index }}">
                        {% if part_names|length > 1 %}
                            Drag your {{ part }} file(s) here or click to open file browser
                        {% else %}
                            Drag your file(s) here or click to open file browser
                        {% endif %}
                    </h2>
                    <input type="file" name="files" id="input-file{{ loop.index }}" class="hide" onchange="addFilesFromInput({{ loop.index }})" multiple aria-label="Select Files to upload" />
                    <table class="file-upload-table" id="file-upload-table-{{ loop.index }}">
                    </table>
                </div>
            {% endfor %}
        </div>

        {# Page selector #}
        {% if student_page %}
            <form id="pdfPageStudent">
                <div class="sub">
                    <div>Enter the page number that corresponds to each question. If the answer spans multiple pages, enter the page the answer starts on.</div>
                    {% for component_name in component_names %}
                        <div>{{ component_name }}: <input type="number" id="page_{{ loop.index0 }}" min="1"></div>
                    {% endfor %}
                </div>
            </form>
        {% endif %}
        {# /Page selector #}

        <p>
            {{ upload_message }}
        </p>

        <button type="button" id="submit" class="btn btn-success">Submit</button>

        {% if part_names is not empty %}
            <button type="button" id="startnew" class="btn btn-primary">Clear</button>

            {% if display_version == highest_version and display_version > 0 %}
                <button type="button" id= "getprev" class="btn btn-primary">Use Most Recent Submission</button>

                {% if core.getConfig().keepPreviousFiles() %}
                <script type="text/javascript">
                    $(function() {
                        setUsePrevious();
                        {% for file in old_files %}
                            addLabel('{{ file.name }}', '{{ file.size }}', {{ file.part }}, true);
                            readPrevious('{{ file.name }}', {{ file.part }});
                        {% endfor %}
                    });
                </script>
                {% endif %}
            {% endif %}
        {% endif %}

        <script type="text/javascript">
            $(function() {
                setButtonStatus();
            });

            // CLICK ON THE DRAG-AND-DROP ZONE TO OPEN A FILE BROWSER OR DRAG AND DROP FILES TO UPLOAD
            var num_parts = {{ part_names|length }};
            createArray(num_parts);
            var assignment_version = {{ display_version }};
            var highest_version = {{ highest_version }};
            for (var i = 1; i <= num_parts; i++ ){
                var dropzone = document.getElementById("upload" + i);
                dropzone.addEventListener("click", clicked_on_box, false);
                dropzone.addEventListener("dragenter", draghandle, false);
                dropzone.addEventListener("dragover", draghandle, false);
                dropzone.addEventListener("dragleave", draghandle, false);
                dropzone.addEventListener("drop", drop, false);
            }

            $("#startnew").click(function(e){ // Clear all the selected files in the buckets
                for (var i = 1; i <= num_parts; i++){
                    deleteFiles(i);
                }
                e.stopPropagation();
            });

            // GET FILES OF THE HIGHEST VERSION
            if (assignment_version == highest_version && highest_version > 0) {
                $("#getprev").click(function(e){
                    $("#startnew").click();
                    {% for file in old_files %}
                        addLabel('{{ file.name }}', '{{ file.size }}', {{ file.part }}, true);
                        readPrevious('{{ file.name }}', {{ file.part }});
                    {% endfor %}
                    setUsePrevious();
                    setButtonStatus();
                    e.stopPropagation();
                });
            }
        </script>
    {% endif %}
</div>

{% if core.getUser().accessFullGrading() %}
    {% include 'submission/homework/PreviousSubmissionForm.twig' %}
    {% include 'submission/homework/BulkUploadProgressBox.twig' %}
{% endif %}

<script type="text/javascript">
    function makeSubmission(user_id, highest_version, is_pdf, path, git_user_id, git_repo_id, merge_previous=false, clobber=false) {
        // submit the selected pdf
        path = decodeURIComponent(path);
        if (is_pdf) {
            submitSplitItem("{{ csrf_token }}", "{{ gradeable_id }}", user_id, path, merge_previous, clobber);
        }
        // otherwise, this is a regular submission of the uploaded files
        else if (user_id == "") {
            handleSubmission({{ late_days_use }},
                {{ days_to_be_charged }},
                {{ allowed_late_days }},
                {{ highest_version }},
                {{ max_submissions }},
                "{{ csrf_token }}",
                {{ is_vcs ? "true" : "false" }},
                {{ num_inputs }},
                "{{ gradeable_id }}",
                "{{ user_id }}",
                git_user_id,
                git_repo_id,
                {{ student_page ? "true" : "false" }},
                {{ component_names|length }},
                merge_previous,
                clobber
            );
        }
        else {
            handleSubmission({{ late_days_use }},
                {{ days_to_be_charged }},
                {{ allowed_late_days }},
                highest_version,
                {{ max_submissions }},
                "{{ csrf_token }}",
                {{ is_vcs ? "true" : "false" }},
                {{ num_inputs }},
                "{{ gradeable_id }}",
                user_id,
                git_user_id,
                git_repo_id,
                {{ student_page ? "true" : "false" }},
                {{ component_names|length }},
                merge_previous,
                clobber
            );
        }
    }
    $(function() {
        $("#submit").click(function(e){ // Submit button
            var user_id = "";
            var num_pages = 0;
            if ($('#radio-student').is(':checked')) {
                user_id = $("#user_id").val();
            };
            if ($('#radio-bulk').is(':checked')) {
                num_pages = $("#num_pages").val();
                use_qr = $("#use-qr").is(":checked");
                qr_prefix = $('#qr_prefix').val();
                qr_suffix = $('#qr_suffix').val();
                if($('#use-qr').is(':checked')){
                    if(!sessionStorage.getItem('qr_prefix'))
                        sessionStorage.setItem('qr_prefix', qr_prefix );
                    if(!sessionStorage.getItem('qr_suffix'))
                        sessionStorage.setItem('qr_suffix', qr_suffix );
                }
            };
            // vcs upload
            var git_user_id = "";
            var git_repo_id = "";
            if ({{ is_vcs ? "true" : "false" }}) {
                git_user_id = $("#github-user-id").val();
                git_repo_id = $("#github-repo-id").val();
            }
            // bulk upload
            if ($("#radio-bulk").is(":checked")) {
                handleBulk("{{ gradeable_id }}",
                            {{ max_post_size }},
                            {{ max_file_size }},
                            num_pages, use_qr, qr_prefix, qr_suffix
                          );
            }
            // no user id entered, upload for whoever is logged in
            else if (user_id == ""){
                makeSubmission(user_id, {{ highest_version }}, false, "", git_repo_id);
            }
            // user id entered, need to validate first
            else {
                validateUserId("{{ csrf_token }}", "{{ gradeable_id }}", user_id)
                .then(function(response){
                    if(response['data']['previous_submission']){
                        let has_been_called = false;
                        var option = displayPreviousSubmissionOptions(getSubmissionOptionForStudentOnly);

                        return;

                        function getSubmissionOptionForStudentOnly(option){
                            if(has_been_called)
                                return;

                            var merge_previous = false;
                            var clobber = false;

                            if(option == 2){
                                merge_previous = true;
                            }
                            else if(option == 3){
                                merge_previous = true;
                                clobber = true;
                            }

                            makeSubmission(user_id,response['data']['highest_version'], false, "", "", "", merge_previous,clobber);
                        }
                    }
                    else{
                        makeSubmission(user_id, response['data']['highest_version'], false, "", "", "");
                    }
                });
            }
            e.stopPropagation();
        });
    });
</script>

{% macro render_testcase_messages(cell, testcase_messages) %}

    {# If testcase_ref is set then attempt to display associated messages #}
    {% if cell.testcase_ref is defined %}

        {% if testcase_messages[cell.testcase_ref] is defined %}

            {% for msg in testcase_messages[cell.testcase_ref] %}
                <p class="feedback-msg-{{ msg.type }}">{{ msg.message }}</p>
            {% endfor %}

        {% endif %}

    {% endif %}

{% endmacro %}

{% macro render_short_answer(short_answer, index, version, testcase_messages) %}
    <p class="short-answer">
        {% if short_answer.rows == 0 %}
            <label>
                <div>
                    {% if short_answer.label %}
                        {{ short_answer.label | markdown }}
                    {% else %}
                        Write your answer below:
                    {% endif %}
                </div>

                {{ self.render_testcase_messages(short_answer, testcase_messages) }}

                <input
                    type="text"
                    name="short_answer_{{ index }}"
                    autocapitalization="off"
                    spellcheck="false"
                    id="short_answer_{{ index }}"
                    class="sa-box"
                    data-initial_value="{{ short_answer.initial_value }}"
                    data-recent_submission="{{ short_answer.recent_submission }}"
                    {% if core.getConfig().keepPreviousFiles() %}
                        value="{{ short_answer.recent_submission }}"
                    {% else %}
                        value="{{ short_answer.initial_value }}"
                    {% endif %}
                    onKeyPress="handle_input_keypress();"
                />
            </label>
        {% else %}
            <label>
                <div>
                    {% if short_answer.label %}
                        {{ short_answer.label | markdown }}
                    {% else %}
                        Write your answer below:
                    {% endif %}
                    Press <kbd>TAB</kbd> to indent. Press <kbd>ESC</kbd> to advance from textarea.
                </div>

                {{ self.render_testcase_messages(short_answer, testcase_messages) }}

                {# Single line to prevent whitespace from being captured #}
                <textarea
                    rows="{{ short_answer.rows }}"
                    cols="50"
                    name="short_answer_{{ index }}"
                    id="short_answer_{{ index }}"
                    class="sa-box"
                    data-initial_value="{{ short_answer.initial_value }}"
                    data-recent_submission="{{ short_answer.recent_submission }}"
                    onKeyPress="handle_input_keypress()"
                >{% if core.getConfig().keepPreviousFiles() %}{{ short_answer.recent_submission }}{% else %}{{ short_answer.initial_value }}{% endif %}</textarea>
            </label>
            {#
                Allow tab in the larger text boxes (normally tab moves to the next textbox)
                http://stackoverflow.com/questions/6140632/how-to-handle-tab-in-textarea

                q.v. function enableTabsInTextArea(jQuerySelector) in server.js
            #}
            <script>
                enableTabsInTextArea('#short_answer_{{ index }}');
            </script>
        {% endif %}
        <button type="button" id="short_answer_{{ index }}_clear_button" class="btn btn-primary sa-clear-reset">Clear</button>
        <button type="button" id="short_answer_{{ index }}_recent_button" class="btn btn-primary sa-clear-reset">Use Most Recent Submission</button>
        <script>

            {% if version == 0 %}
                document.getElementById("short_answer_{{ index }}_recent_button").style.visibility = 'hidden';
            {% endif %}

            // Setup init state of buttons
            {% if core.getConfig().keepPreviousFiles() %}

                {% if version == 0 %}
                    document.getElementById("short_answer_{{ index }}_clear_button").disabled = true;
                {% else %}
                    document.getElementById("short_answer_{{ index }}_clear_button").disabled = false;
                {% endif %}

                document.getElementById("short_answer_{{ index }}_recent_button").disabled = true;
            {% else %}
                document.getElementById("short_answer_{{ index }}_clear_button").disabled = true;
                document.getElementById("short_answer_{{ index }}_recent_button").disabled = false;
            {% endif %}

        </script>
    </p>
{% endmacro %}
